import React, { useEffect } from "react";
import { Rotation } from "./RotationChart.style";
import { useHistory } from "react-router-dom";

//引入Swiper组件
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

const RotationChart = (props) => {
  const { rotationImg } = props;

  const history  = useHistory();

  useEffect(() => {
    setTimeout(() => {
      new Swiper(".swiper-container", {
        loop: true,
        autoplay: {
          delay: 2000,
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
        },
      });
    }, 100);
  },[]);

  const goToMovieDetail = (item) => {
    history.push({ pathname: `/movie/movieDetail/${item.id}`, state: item });
  };

  return (
    <Rotation>
      <div className="swiper-container">
        <div className="swiper-wrapper">
          {rotationImg.map((item, index) => {
            return (
              <div className="swiper-slide" key={index}>
                <a className="rotationChart_movie_name">{item.name}</a>
                <div className="rotationChart_movie_data">
                  <span>
                    <h1>
                      {item.book_office}
                      <a>亿</a>
                    </h1>
                    <h2>累计票房(公映)</h2>
                  </span>
                  <span>
                    <h1>
                      {item.grade}
                      <a>分</a>
                    </h1>
                    <h2>猫眼口碑</h2>
                  </span>
                  <span>
                    <h1>{item.director}</h1>
                    <h2>导演&nbsp;倾情打造</h2>
                  </span>
                </div>
                <div>
                  <img
                    src={item.picUrl}
                    className="rotationChart_movie_img"
                    alt=""
                  />
                </div>
                <button
                  className="rotationChart_movie_Buy"
                  onClick={() => goToMovieDetail(item)}
                >
                  立即观看
                </button>
              </div>
            );
          })}
        </div>
        <div className="swiper-pagination"></div>
      </div>
    </Rotation>
  );
};

export default RotationChart;
